<template>
  <view class="body">
    <scroll-view scroll-x="true"
                 :scroll-with-animation="true"
                 :scroll-left="scrollLeft"
                 class="typeBox flex flex-row"
    >
      <view v-for="(item,index) in goodsTypes" class="type" @tap.stop="setType(item,index)">
        <view><image class="img" :src="item.imageUrl" /></view>
        <view :class="{'nameBox':currentIndex === index}" class="name flex a-item j-content">{{ item.name }}</view>
      </view>
    </scroll-view>
    <view class="allBox flex j-content a-item" @tap.stop="clickAll">
      <p>全部</p>
      <image class="allImg" src="https://www.zjjqf.cn/file/static/listAll.png"></image>
    </view>
    <view class="pointer" :style="{marginLeft:marginLeft}" />
  </view>
</template>

<script>
export default {
  name: "goodsTypeList",
  props:{
    goodsTypes:{
      type:Array,
      default:()=>[]
    },
    goodsTypeIndex:{
      type:Number,
      default:0
    }
  },
  watch:{
    goodsTypeIndex(n){
      this.setType(this.goodsTypes[n],n)
    }
  },
  data(){
    return{
      scrollLeft:0,
      currentIndex:0,
      marginLeft: '30rpx',
    }
  },
  methods:{
    setType(val,index){
      this.currentIndex = index
      if(index <= 2){
        this.scrollLeft = '0rpx'
        this.marginLeft = (index * 130) + 30 +"rpx"
      }else if (index >= this.goodsTypes.length - 2 ){
        this.scrollLeft = this.goodsTypes.length * 130 +'rpx'
        this.marginLeft = 650 - (this.goodsTypes.length  - index) * 130 + 30 +"rpx"
      }else {
        const left =   (index-2) * 130
        this.scrollLeft = left +'rpx'
        this.marginLeft= '300rpx'
      }
      this.$emit('change',val)
    },
    clickAll(){
      this.$emit('clickAll')
    }
  }
}
</script>

<style lang="scss" scoped>
.body{
  position: relative;
  width: 100%;
}
.typeBox{
  width: 650rpx;
  white-space: nowrap;
  border-right: 2px solid rgba(0,0,0,0.2);
  .type{
    width: 130rpx;
    display: inline-block;
    image{
      margin: 0 auto;
      width: 110rpx;
      height: 110rpx;
      border-radius: 110rpx;
    }
    .nameBox{
      width: 120rpx;
      background: #ffffff;
      border-radius: 30rpx;
      color: red !important;
    }
    .name{
      width: 130rpx;
      overflow-y: hidden;
      font-family: PingFang SC;
      font-size: 26rpx;
      color: #ffffff;
    }
    }
}
.pointer{
  margin-top: 10rpx;
    width: 0;
    height: 0;
    border-left: 20rpx solid transparent;
    border-right: 20rpx solid transparent;
    border-bottom: 20rpx solid #ffffff;
    transition: margin linear 0.2s;
}
.allBox{
  position: absolute;
  width: 100rpx;
  height: 150rpx;
  writing-mode:vertical-rl;
  right: 0;
  top: 0;
  color:#ffffff;
  font-family: PingFang SC;
  word-spacing: inherit;
  font-size: 32rpx;
  .allImg{
    width: 40rpx;
    height: 40rpx;
  }
}
</style>
